<template>
  <div>
    <div class="titleservice">
      <div class="diyiservice"></div>
      <font>服务项目管理</font>
    </div>
    <div class="dierserivce">
      <el-form ref="form" :model="form" label-width="70px">
        <table class="table1" border="0" width="100%" height="40px">
          <tr align="right">
            <td width="60px">
              <font class="font1">服务类型&nbsp;&nbsp;</font>
            </td>
            <td width="230px" align="left">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in list"
                  :label="item.label"
                  :key="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </td>
            <td width="120px" colspan="2">
              <el-input v-model="serviceName" class="shuru"></el-input
              ><i class="el-icon-search biaobiao" @click="onSubmit"></i>
            </td>

            <td align="right"></td>
            <td align="right">
              <el-button type="primary">新增服务项目</el-button>
            </td>
          </tr>
        </table>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8000";
export default {
  data() {
    return {
      list: [
        {
          value: 1,
          label: "付费项目",
        },
        {
          value: 2,
          label: "免费项目",
        },
      ],
      value: "", //状态

      serviceName: "",
    };
  },
  methods: {
    onSubmit() {
      this.$emit("subFn", this.value, this.serviceName);
    },
  },
};
</script>

<style>
.shuru {
  position: relative;
  top: 10px;
}
.biaobiao {
  position: relative;
  top: -20px;
  left: -10px;
}
.tubiao {
  float: left;
  margin-top: -10px;
  margin-left: 10px;
  /* z-index: 100; */
}
.table2 {
  float: left;
  margin-top: 1.5%;
  /* margin-left: 2%; */
}
.table1 {
  float: left;
  /* margin-top: 1%; */
  /* margin-left: 2%; */
}
.font1 {
  font-size: 13px;
  color: #999999;
}
.dierserivce {
  width: 96%;
  height: 110px;
  font-size: 18px;
  margin-left: 0;
  /* background: rgb(174, 63, 63); */
  margin-top: 1%;
}
.diyiservice {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.titleservice {
  width: 100%;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
</style>